<template>
  <view class="carousel">
    <swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000">
      <swiper-item v-for="banner in list" :key="banner.bannerId">
        <image :src="banner.image" mode="scaleToFill" class="image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import type { Banner } from '@/types/home'
import { defineProps } from 'vue'
defineProps<{ list: Banner[] }>()
</script>

<style lang="scss">
.carousel {
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
